import React from 'react'
import PropTypes from 'prop-types'
import { Menu, Icon, Popover, Layout, Tooltip } from 'antd'
import { NavLink } from 'react-router-dom'
import { config } from 'setting'
import { stringSize  } from 'utils'
import styles from './Header.less'
import YQMenu from './Menu'

const { defaultPage } = config
const { SubMenu } = Menu

const YQHeader = ({
  user, logout, isNavbar, menuPopoverVisible, location, switchMenuPopover, localeLangText, changeLang, headerMenus,
  menu, navOpenKeys, changeOpenKeys, getProdMenu, closeProdMenu, switchSpreadAbled,
}) => {
  // 主菜单缩小至头部后
  const menusProps = {
    menu,
    isNavbar,
    handleClickNavMenu: switchMenuPopover,
    location,
    navOpenKeys,
    changeOpenKeys,
    getProdMenu,
    closeProdMenu,
    switchSpreadAbled,
  }

  // 右边菜单
  const handleRightMenu = e => {

    if(e.key === 'login') logout()

    if(e.key.search('_') !== -1) changeLang(e.key)

  }

  const menuItems = ((headerMenus) => {
    let tatalSize = 0
    headerMenus.forEach((item) => tatalSize += stringSize(item.name))
    return headerMenus.map((item) => {
      const strsize = stringSize(item.name)
      return (
        <Menu.Item key={item.id} style={isNavbar && {width: `${strsize/tatalSize}%`}}>
          <Tooltip title={item.name}>
            <a href={item.path} >{ item.name }</a>
          </Tooltip>
        </Menu.Item>
      )
    })
  })(headerMenus)

  const productPanel = (
    <div>此处待定！！</div>
  )

  return (
    <Layout.Header className={styles.header}>
      {isNavbar &&
      <Popover placement="bottomLeft" onVisibleChange={switchMenuPopover} visible={menuPopoverVisible} overlayClassName={styles.popovermenu} trigger="click" content={<YQMenu {...menusProps} />}>
        <div className={styles.button}>
          <Icon type="bars" />
        </div>
      </Popover>}

      <div className={styles.logo}>
        <NavLink to={defaultPage} className={styles.navlink} activeStyle={{ color: "#1890ff" }}>
          <img alt="logo" src={config.logo} />
          <span>{config.name}</span>
        </NavLink>
      </div>

      <div className={styles.leftMenu}>
        {isNavbar? <Menu mode="horizontal" theme="dark" style={{ width: Number(headerMenus.length*50) }}>
          {menuItems}
        </Menu> : <Menu mode="horizontal" theme="dark">
          {menuItems}
        </Menu>}
        
        <div className={styles.moreItem}>
          <Popover content={productPanel} title="请选择你要添加的产品" trigger="click">
            <Icon type="plus-square-o" />
          </Popover>
        </div>
      </div>

      <div className={styles.rightMenu}>
        <Menu mode="horizontal" theme="dark" onClick={handleRightMenu}>
          {/* 国际化语言切换 */}
          <SubMenu
            title={<span>{localeLangText}</span>}
          >
            <Menu.Item key="zh_CN">简体中文</Menu.Item>
            <Menu.Item key="en_US">Engilsh</Menu.Item>
          </SubMenu>
          {/* 登出 */}
          <SubMenu
            title={<span>
              <Icon type="user" />
              {user.username}
            </span>}
          >
            <Menu.Item key="logout">退出</Menu.Item>
          </SubMenu>
        </Menu>
      </div>
    </Layout.Header>
  )
}

YQHeader.propTypes = {
  menu: PropTypes.array,
  user: PropTypes.object,
  logout: PropTypes.func,
  isNavbar: PropTypes.bool,
  menuPopoverVisible: PropTypes.bool,
  location: PropTypes.object,
  switchMenuPopover: PropTypes.func,
  navOpenKeys: PropTypes.array,
  changeOpenKeys: PropTypes.func,
  localeLangText: PropTypes.string,
  changeLang: PropTypes.func,
  headerMenus: PropTypes.array,
  getProdMenu: PropTypes.func,
  closeProdMenu: PropTypes.func,
  switchSpreadAbled: PropTypes.func,
}

export default YQHeader
